<script setup lang="ts">
defineOptions({
  name: "fabCommonQueryOperation"
});

import { ref, onMounted, nextTick, computed, onUnmounted } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import modelBox from "@/views/common/components/modelBox/index.vue";
import commonTable from "@/views/common/components/commonTable/index.vue";
import { Search } from "@px-ui/icons-vue";
import { queryFabCommonQueryOperationPlan, queryFabCommonQueryFabPlan } from "@/api/modules/fab";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";
import type { EChartsOption } from "echarts";
import { useInitEchartsGaugeOptions } from "../hooks";

const gap = 30;
const defaultHeight = 317;
const scrollbarHeight = ref<number>(defaultHeight);
const commonTableBoxRef = ref<HTMLElement | null>(null);
const title = ref<string>("运营计划");
const loading = ref<boolean>(false);
const eqpId = ref<string>("");
const tableParams = ref<{ eqpId: string }>({ eqpId: "" });
const planData = ref<Record<string, any>>({});
const tableData = ref<Array<any>>([]);
const tableLoading = ref<boolean>(false);

const timeStartRateRef = ref<InstanceType<typeof echartsCom> | null>(null);
const performanceStartRateRef = ref<InstanceType<typeof echartsCom> | null>(null);
const oeeRef = ref<InstanceType<typeof echartsCom> | null>(null);

const timeStartRateOptions = ref<EChartsOption | null>(null);
const performanceStartRateOptions = ref<EChartsOption | null>(null);
const oeeOptions = ref<EChartsOption | null>(null);

const planList = ref<Array<{ label: string; value: string; key: string }>>([
  {
    label: "机台总运行时间",
    key: "machineRunTime",
    value: ""
  },
  {
    label: "实际生产速度",
    key: "actualSpeed",
    value: ""
  },
  {
    label: "计划停机时间",
    key: "planStopTime",
    value: ""
  },
  {
    label: "理论最高生产速度",
    key: "theoreticalMaxSpeed",
    value: ""
  },
  {
    label: "非计划停机时间",
    key: "unPlanStopTime",
    value: ""
  },
  {
    label: "合格产品数量",
    key: "qualifiedProductNum",
    value: ""
  },
  {
    label: "等待时间",
    key: "waitTime",
    value: ""
  },
  {
    label: "总产量",
    key: "totalOutput",
    value: ""
  }
]);

const tableCloumns = [
  { label: "机台ID", prop: "eqpId", width: 70 },
  { label: "区域", prop: "areaId", width: 50 },
  { label: "类型", prop: "type", width: 50 },
  { label: "新进时间", prop: "newTime", width: 60 },
  { label: "转制成时间", prop: "turnTime", width: 80 },
  { label: "当前状态", prop: "status", width: 60 }
];

const eqpIdCodeChangeHandler = () => {
  tableParams.value = { eqpId: eqpId.value };
};

const queryFabCommonQueryOperationPlanFn = async () => {
  const res = await queryFabCommonQueryOperationPlan(null, () => {
    loading.value = false;
  });
  planData.value = res;
  for (const i of planList.value) {
    i.value = res[i.key];
  }
};

const initEcharts = async () => {
  useInitEchartsGaugeOptions("时间开动率", planData.value?.timeStartRate, async o => {
    timeStartRateOptions.value = o;
  });
  useInitEchartsGaugeOptions("性能开动率", planData.value?.performanceStartRate, async o => {
    performanceStartRateOptions.value = o;
  });
  useInitEchartsGaugeOptions("OEE", planData.value?.oee, async o => {
    oeeOptions.value = o;
  });
};

const init = async () => {
  loading.value = true;
  await queryFabCommonQueryOperationPlanFn();
  await nextTick();
  await initEcharts();
  loading.value = false;
};

onMounted(async () => {
  await init();
  await useUpdateDomHeight(scrollbarHeight, commonTableBoxRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());
</script>

<template>
  <modelBox :title="title">
    <div v-loading="loading" class="fab-common--query-production-content">
      <div v-loading="loading" class="production-oee">
        <echartsCom ref="timeStartRateRef" :options="timeStartRateOptions" />
        <echartsCom ref="performanceStartRateRef" :options="performanceStartRateOptions" />
        <echartsCom ref="oeeRef" :options="oeeOptions" />
      </div>
      <div v-loading="loading" class="production-statis">
        <div v-for="item in planList" :key="item.key" class="statis-item">
          <div class="statis-item-label">{{ item.label }}：</div>
          <div class="statis-item-value">{{ item.value }}</div>
        </div>
      </div>
      <div class="production-fab">
        <div class="production-fab-head">
          <div class="production-fab-head-label">新进机台计划</div>
          <div class="production-fab-head-input">
            <px-input
              v-model.trim="eqpId"
              clearable
              :prefix-icon="Search"
              size="small"
              placeholder="请输入机台ID"
              @keydown.enter="eqpIdCodeChangeHandler"
              @clear="eqpIdCodeChangeHandler"
            />
          </div>
        </div>
        <div v-show="!!tableData?.length" ref="commonTableBoxRef" class="production-fab-table">
          <commonTable
            ref="commonTableRef"
            v-model="tableData"
            v-model:loading="tableLoading"
            mode="stripe"
            immediate
            :pagination="false"
            :border="false"
            :tableCloumns="tableCloumns"
            :height="scrollbarHeight"
            :axiosApi="queryFabCommonQueryFabPlan"
            :params="tableParams"
          />
        </div>
        <div v-if="!tableData?.length" v-loading="tableLoading" class="production-fab-table-empty">
          <px-empty class="px-empty-common" />
        </div>
      </div>
    </div>
  </modelBox>
</template>

<style lang="scss" scoped>
.fab-common--query-production-content {
  display: grid;
  grid-template-rows: 25% 25% 50%;
  grid-template-columns: repeat(3, 100%);
  gap: 8px;
  width: 100%;
  height: calc(100% - 16px);

  .production-oee {
    display: grid;
    grid-area: 1 / 1 / 2 / 2;
    grid-template-rows: repeat(1, 100%);
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .production-statis {
    display: grid;
    grid-area: 2 / 1 / 3 / 2;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 60px;

    .statis-item {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;

      .statis-item-label {
        font-size: 14px;
        line-height: 1.5;
        color: #333;
        white-space: nowrap;
      }

      .statis-item-value {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        color: #222;
        white-space: nowrap;
      }
    }
  }

  .production-fab {
    grid-area: 3 / 1 / 4 / 2;
    display: flex;
    flex-direction: column;
    .production-fab-head {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 36px;
      padding: 0 8px;
      // background-color: #f5f5f5;

      .production-fab-head-label {
        font-size: 14px;
        font-weight: 600;
        color: #222;
      }

      .production-fab-head-input {
        width: 160px;
      }
    }

    .production-fab-table {
      width: 100%;
      height: calc(100% - 36px);
    }

    .production-fab-table-empty {
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
